<template>
	<el-container v-loading="loading">
		<el-main>
			<el-card shadow="never" header="微信公众号">
				<el-col :lg="{span: 8, offset: 1}">
					<el-form ref="form" :model="config" label-width="100px" style="margin-top: 20px;">
						<el-form-item label="公众号名称"  width="120">
							<el-input v-model="config.name"  placeholder="请输入公众号名称"></el-input>
						</el-form-item>
						<el-form-item label="原始ID"  width="120">
							<el-input v-model="config.original_id"  placeholder="请输入原始ID"></el-input>
						</el-form-item>
						<el-form-item label="公众号二维码">
							<sc-upload v-model="config.qr_code"></sc-upload>
							<div class="el-form-item-msg">建议尺寸：宽400px*高400px。jpg，jpeg，png格式</div>
						</el-form-item>
					</el-form>
				</el-col>
			</el-card>
			<el-card shadow="never" header="公众号开发者信息" style="margin-top: 15px;">
				<el-col :lg="{span: 8, offset: 1}">
					<el-form ref="form" :rules="rules" :model="config" label-width="100px" style="margin-top: 20px;">
						<el-form-item label="AppID"  width="120"  prop="app_id">
							<el-input v-model="config.app_id" clearable  placeholder="请输入AppID"></el-input>
						</el-form-item>
						<el-form-item label="AppSecret"  width="120"  prop="app_secret">
							<el-input v-model="config.app_secret" clearable  placeholder="请输入AppSecret"></el-input>
						</el-form-item>
						<el-form-item>
							<div class="el-form-item-msg">小程序账号登录微信公众平台，点击开发>开发设置->开发者ID，设置AppID和AppSecret</div>
						</el-form-item>
					</el-form>
				</el-col>
			</el-card>
			<el-card shadow="never" header="服务器配置" style="margin-top: 15px;">
				<el-col :lg="{span: 9, offset: 0}">
					<el-form ref="form" :model="config" label-width="160px" style="margin-top: 20px;">
						<el-form-item label="URL"  width="120" style="display: flex;">
							<el-input v-model="config.url" disabled  style="width: 83%;"></el-input>
							<el-button v-copy="config.url" type="info" style="margin-left: 10px;">复制</el-button>
							<div class="el-form-item-msg">
								登录微信公众平台，点击开发>基本配置>服务器配置，填写服务器地址（URL）
							</div>
						</el-form-item>
						<el-form-item label="Token"  width="120" style="display: flex;">
							<el-input v-model="config.token"  style="width: 83%;"></el-input>
							<el-button v-copy="config.token" type="info" style="margin-left: 10px;">复制</el-button>
							<div class="el-form-item-msg">
								登录微信公众平台，点击开发>基本配置>服务器配置，设置令牌Token。不填默认为“likeshop”
							</div>
						</el-form-item>
						<el-form-item label="EncodingAESKey"  width="120" style="display: flex;">
							<el-input v-model="config.encoding_aes_key"  style="width: 83%;"></el-input>
							<el-button v-copy="config.encoding_aes_key" type="info" style="margin-left: 10px;">复制</el-button>
							<div class="el-form-item-msg">
								消息加密密钥由43位字符组成，字符范围为A-Z,a-z,0-9
							</div>
						</el-form-item>
						<el-form-item label="消息加密方式" required prop="encryption_type">
							<div class="flex-1 min-w-0">
								<el-radio-group
										class="flex-col !items-start min-w-0"
										v-model="config.encryption_type"
								>
									<el-radio :label="1">
										明文模式 (不使用消息体加解密功能，安全系数较低)
									</el-radio>

									<el-radio :label="2">
										兼容模式 (明文、密文将共存，方便开发者调试和维护)
									</el-radio>
									<el-radio :label="3">
										安全模式（推荐） (消息包为纯密文，需要开发者加密和解密，安全系数高)
									</el-radio>
								</el-radio-group>
							</div>
						</el-form-item>
					</el-form>
				</el-col>
			</el-card>
			<el-card shadow="never" header="功能设置" style="margin-top: 15px;">
				<el-col :lg="{span: 8, offset: 1}">
					<el-form ref="form" :model="config" label-width="100px" style="margin-top: 20px;">
						<el-form-item label="业务域名"  width="120" style="display: flex;">
							<el-input v-model="config.business_domain" disabled   style="width: 83%;"></el-input>
							<el-button v-copy="config.business_domain" type="info" style="margin-left: 10px;">复制</el-button>
							<div class="el-form-item-msg">
								登录微信公众平台，点击设置>公众号设置>功能设置，填写业务域名
							</div>
						</el-form-item>
						<el-form-item label="JS接口安全域名"  width="120" style="display: flex;">
							<el-input v-model="config.js_secure_domain" disabled   style="width: 83%;"></el-input>
							<el-button v-copy="config.js_secure_domain" type="info" style="margin-left: 10px;">复制</el-button>
							<div class="el-form-item-msg">
								登录微信公众平台，点击设置>公众号设置>功能设置，填写JS接口安全域名
							</div>
						</el-form-item>
						<el-form-item label="网页授权域名"  width="120" style="display: flex;">
							<el-input v-model="config.web_auth_domain" disabled   style="width: 83%;"></el-input>
							<el-button v-copy="config.web_auth_domain" type="info" style="margin-left: 10px;">复制</el-button>
							<div class="el-form-item-msg">
								登录微信公众平台，点击设置>公众号设置>功能设置，填写网页授权域名
							</div>
						</el-form-item>
					</el-form>
				</el-col>
			</el-card>
		</el-main>
		<el-footer style="height:51px;text-align: center;">
			<el-button type="primary" @click="setConfig()">保存</el-button>
		</el-footer>
	</el-container>
</template>

<script>
	export default {
		name: 'system',
		data() {
			return {
				config:{},
				rules: {
					app_id:[
						{required: true, message: '请输入AppID'}
					],
					app_secret:[
						{required: true, message: '请输入AppSecret'}
					],
				},
				isSaveing: false
			}
		},
		mounted() {
			this.getConfig()
		},
		methods: {
			async setConfig(){
				this.$refs.form.validate(async (valid) => {
					if (valid) {
						this.isSaveing = true;
						var res = await this.$API.setting.wx_oa.setConfig.post(this.config);
						this.isSaveing = false;
						if(res.code == 1){
							this.$emit('success', this.form, this.mode)
							this.$message.success("操作成功")
						}else{
							this.$alert(res.message, "提示", {type: 'error'})
						}
					}
				})

			},
			async getConfig(){
				var res = await this.$API.setting.wx_oa.getConfig.get()
				if(res.code == 1){
					this.config = res.data
				}
			}
		}
	}
</script>

<style>
.form-tips{

}
</style>
